<template>
  <div>
    <!-- ======== loading ============ -->
    <van-loading
      style="margin: 2.5rem 0rem"
      class="loading"
      v-if="listLoading"
      type="spinner"
      :vertical="true"
    />
    <van-list
      v-if="liveList.length"
      v-model="loading"
      :finished="finished"
      finished-text="我是有底线的~"
      @load="onLoadlives"
      :immediate-check="false"
    >
      <div class="sh_live" v-for="(item, index) in liveList" :key="index" @click="toLivePage(item)">
        <div class="sh_live_i">
          <img v-lazy="item.roomLogo" v-errorImg:live />
          <div class="liveAnimation" v-if="item.status == 1">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="sh_live_r">
          <div class="t">{{ item.roomTitle }}</div>
          <div class="b">开播时间：{{ timestamp(item.beginUnx, "Y-M-D") }}</div>
        </div>
      </div>
    </van-list>
    <!-- ======== 直播缺省图 ============= -->
    <div class="no_data" v-if="!liveList.length && !listLoading">
      <img src="@/assets/one/zw.png" alt />
      <div class="zw">暂时没有找到您想要的直播~</div>
    </div>
    <!-- <div class="theend" v-if="liveList.length && countli && !listLoading">我是有底线的~</div> -->
    <!-- vip权限 -->
    <noPower v-if="hasRoot && !listLoading" :isRank="true"/>
  </div>
</template>
<script>
import errorImg from '@/assets/img/livevideo.png'; //图片

export default {
  data() {
    return {
      keytext: this.$route.query.name, // 搜索关键词
      listLoading: false, //列表搜索loading
      loading: false,
      liveList: [], //直播列表
      countli: false, // 直播是否触底
      pageli: 1, //直播
      pageSize:10,
      liveTime: [], // 时间
      finished: false, // 触底
      hasRoot: false, // 有无权限
      errorImg: errorImg
    };
  },
  props: ['valueSerach'],
  watch: {
    valueSerach(valueSerach) {
      if (valueSerach == '') {
        // 传空值时会代入空字符，不传时接口也不代入
        this.keytext = '';
        this.pageli = 1;
        this.liveList = [];
        this.hasRoot = false;
        this.finished = false;
        this.getlives();
      }
    }
  },
  created() {
    //当前日期为结束日期
    let d = new Date();
    let year1, month1, day1;
    [year1, month1, day1] = [d.getFullYear(), d.getMonth(), d.getDate()];
    let date1 = new Date(year1, month1, day1, 7);
    this.liveTime.push(date1);
    //开始日期设置
    let year2, month2, day2;
    d.setTime(d.getTime() - 7 * 24 * 60 * 60 * 1000);
    [year2, month2, day2] = [d.getFullYear(), d.getMonth(), d.getDate()];
    let date2 = new Date(year2, month2, day2, 7);
    this.liveTime.unshift(date2);

    this.keytext = this.valueSerach;
    this.getlives();
  },
  methods: {
    search(i) {
      this.keytext = i;
      this.pageli = 1;
      this.liveList = [];
      this.hasRoot = false;
      this.finished = false;
      this.getlives();
    },
    search1(i) {
      this.keytext = i;
    },
    // 直播 搜索 数据
    getlives() {
      // this.$router.push({ path: '/searchHistory', query: { name: this.keytext } });
      this.listLoading = (this.pageli == 1);
      this.loading = true;
      this.$axios
        .post('/api/live/search', {
          category: 0,
          startdate: this.formatDate(this.liveTime[0], 'yyyy-MM-dd'), //直播开始时间
          enddate: this.formatDate(this.liveTime[1], 'yyyy-MM-dd'), //直播结束时间
          firstcategoryId: 0,
          gender: 2,
          isshop: 0,
          keyword: this.keytext,
          laimai: 2,
          more_gender: 2,
          order_by: 'desc',
          page: this.pageli, //  当前页数
          procategory: '0',
          procategorys: [],
          size: this.pageSize, // 页容量
          sort: 1
        })
        .then(res => {
          this.listLoading = false;
          this.loading = false;
          if (res.data.code == 0) {
            this.liveList = this.liveList.concat(res.data.data);
            if (res.data.count == this.liveList.length) {
              this.countli = true;
            }
            if(res.data.data.length < this.pageSize){
              this.loading = false;
              this.finished = true;
            }
          } else if (res.data.code == 1003 || res.data.code == 1013) {
            this.hasRoot = true; //无权限
            this.loading = false;
            // this.finished = true;
          }
        });
    },
    // 直播 触底
    onLoadlives() {
      if (this.pageli * 10 > this.liveList.length) {
        this.listLoading = false;
        this.loading = false;
        this.finished = false;
      } else if (this.liveList.length) {
        this.pageli = this.pageli + 1;
        this.getlives();
      }
    },
    // 跳转直播详情
    toLivePage(item) {
      this.$router.push({
        path: '/LiveForDetailsMain',
        query: {
          room_id: item.roomId,
          author_id: item.authorId
        }
      });
    }
  }
};
</script>
<style  scoped lang="less">
.sh_live {
  width: 100%;
  height: 1.72rem;
  margin-top: 0.266667rem;
  background-color: #fff;
  border-radius: 0.133333rem;
  display: flex;
  align-items: center;
  padding-left: 0.266667rem;
  box-sizing: border-box;
  .sh_live_i {
    position: relative;
    width: 1.173333rem;
    height: 1.173333rem;
    border-radius: 0.266667rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.266667rem;
    }
  }
  .sh_live_r {
    margin-left: 0.266667rem;
    .t {
      width: 6.666667rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.4rem;
      color: #222222;
    }
    .b {
      margin-top: 0.053333rem;
      font-size: 0.32rem;
      color: #888888;
    }
  }
}
.no_data {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 2.666667rem;
  img {
    width: 4rem;
    height: 2.8rem;
  }
  .zw {
    font-size: 0.346667rem;
    color: #888888;
  }
}
.theend {
  font-size: 0.32rem;
  text-align: center;
  color: #888;
  padding-top: 0.8rem;
  span {
    color: #fd7f2c;
  }
}
</style>
